<template>
  <el-card>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="i in tabList"
        :key="i.id"
        :label="i.name"
        :name="i.id + ''"
      >
        <el-row :gutter="10" v-if="show">
          <el-col :span="4">
            <!-- 环图 -->
            <dv-active-ring-chart :config="typeRing" />
          </el-col>
          <el-col :span="8">
            <!-- 轮播表 -->
            <div>
              <div class="label">残疾类型</div>
              <dv-scroll-board :config="typeBoard" />
            </div>
          </el-col>
          <el-col :span="4">
            <!-- 环图 -->
            <dv-active-ring-chart :config="levelRing" />
          </el-col>
          <!-- 轮播表 -->
          <el-col :span="8">
            <div>
              <div class="label">残疾等级</div>
              <dv-scroll-board :config="levelBoard" />
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import { getDictionary } from "../../../filters";
export default {
  name: "rightTop",
  created() {
    this.API.getChildList().then(res => {
      this.tabList = res.data;
      this.activeName = res.data[0].id + "";
      this.getData(res.data[0].id);
    });
  },
  data() {
    return {
      show: false,
      activeName: "诸葛镇",
      tabList: [],
      typeRing: {
        data: [],
        digitalFlopStyle: {
          fontSize: 20,
          fill: "black"
        },
        lineWidth: 10
      },
      typeBoard: {
        data: [],
        oddRowBGC: "#FFF",
        evenRowBGC: "#FFF",
        rowNum: 4,
        columnWidth: [200, 100],
        align: ["center"]
      },
      levelRing: {
        data: [],
        digitalFlopStyle: {
          fontSize: 20,
          fill: "black"
        },
        lineWidth: 10
      },
      levelBoard: {
        data: [],
        oddRowBGC: "#FFF",
        evenRowBGC: "#FFF",
        rowNum: 4,
        columnWidth: [200, 100],
        align: ["center"]
      },
      dis_type: getDictionary("DIS_TYPE"),
      dis_level: getDictionary("DIS_LEVEL")
    };
  },
  methods: {
    handleClick({ name }) {
      this.show = false;
      this.getData(name);
    },
    getData(areaCode) {
      this.API.getCountByAreaCode({ areaCode }).then(res => {
        let { disLevelList, disTypeList } = res.data;
        // ? left
        let typeRingData = [];
        let typeBoardData = [];
        let typeTotal = [];
        disTypeList.map(i => typeTotal.push(i.count));
        disTypeList.map(i => {
          let name = this.getDictName(this.dis_type, i.disabled_type);
          typeRingData.push({ name, value: i.count });
          typeBoardData.push(
            this.setBoard(
              name,
              i.count,
              typeTotal.reduce((i, j) => i + j)
            )
          );
        });
        // 设置值
        this.typeRing.data = typeRingData;
        this.typeBoard.data = typeBoardData;
        // 更新视图
        this.typeRing = { ...this.typeRing };
        this.typeBoard = { ...this.typeBoard };

        // ? right
        let levelRingData = [];
        let levelBoardData = [];
        let levelTotal = [];
        disLevelList.map(i => levelTotal.push(i.count));
        disLevelList.map(i => {
          let name = this.getDictName(this.dis_level, i.disabled_level);
          levelRingData.push({ name, value: i.count });
          levelBoardData.push(
            this.setBoard(
              name,
              i.count,
              levelTotal.reduce((i, j) => i + j)
            )
          );
        });
        // 设置值
        this.levelRing.data = levelRingData;
        this.levelBoard.data = levelBoardData;
        // 更新视图
        this.levelRing = { ...this.levelRing };
        this.levelBoard = { ...this.levelBoard };
        this.show = true;
      });
    },
    getDictName(dict, key) {
      let res = dict.find(i => i.keyword == key);
      if (res) {
        return res.label;
      }
    },
    setBoard(n, c, t) {
      let p = parseInt((c / t) * 100);
      return [
        `<div style="float:left">
            <i class="el-icon-s-data" style="
              padding: 5px;
              margin-right: 5px;
              border-radius: 4px;
              color: rgb(157, 253, 68);
              background: rgb(215, 255, 177);"></i>
            <span style="color:#303133;margin-right:5px">${n}</span>
            <span style="color:#a9a9a9">${c}人</span>
            </div>`,
        `<span style="color:#303133;margin-right:5px;font-weight:bold">${p}%</span>`
      ];
    }
  }
};
</script>

<style scoped>
/deep/ .el-card__body {
  padding: 10px;
}
.dv-active-ring-chart {
  width: 15vw;
  height: 15vw;
  transform: translate(-42px, -20px);
}
.dv-active-ring-chart canvas {
  width: 15vw;
  height: 15vw;
}
.dv-scroll-board {
  width: 100%;
  height: 22vh;
}
.label {
  padding: 0 10px;
  font-size: 15px;
}
@media screen and (min-width: 1980px) {
  .dv-scroll-board {
    height: 27vh;
  }
  /deep/ .dv-scroll-board .row-item {
    display: flex;
    justify-content: space-between !important;
  }
  .dv-active-ring-chart {
    transform: translate(-56px, -20px);
  }
}
</style>
